<template>
  <div class="app-container">
    <xh-list-head
      @on-search="handleSearch"
      ref="TableHead"
      crmType="total"
      :showStatus="false"
      :fielname="fielname"
      :listHander="listHander"
      :defaultDateRang="defaultDateRang"
      placeholder="请输入部门/人员名称"
    />
    <el-table
      v-loading="listLoading"
      :data="tableData"
      element-loading-text="加载中"
      :height="height"
      use-virtual
      stripe
      border
      highlight-current-row
      style="width: 100%"
      @selection-change="handleSelectionChange"
      @sort-change="sortChange"
    >
      <el-table-column
        show-overflow-tooltip
        type="selection"
        align="center"
        width="55"
      />
      <el-table-column label="部门名称" align="center" fixed="left">
        <template slot-scope="scope">
          {{ scope.row.dptname }}
        </template>
      </el-table-column>
      <el-table-column label="用户名" align="center">
        <template slot-scope="scope">
          {{ scope.row.username }}
        </template>
      </el-table-column>
      <el-table-column
        label="应点检数"
        align="center"
        sortable="custom"
        prop="plandjcount"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.plandjcount }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="实点检数"
        align="center"
        sortable="custom"
        prop="actdjcount"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.actdjcount }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="点检完成率"
        align="center"
        sortable="custom"
        prop="finishrate"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.finishrate }}%</span>
        </template>
      </el-table-column>
      <el-table-column
        label="正常点检数"
        align="center"
        sortable="custom"
        prop="normaldjcount"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.normaldjcount }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="异常点检数"
        align="center"
        sortable="custom"
        prop="abnormaldjcount"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.abnormaldjcount }}</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- <div class="p-contianer">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size.sync="pageSize"
        :total="total"
        :pager-count="5"
        class="p-bar"
        background
        layout="prev, pager, next, sizes, total, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div> -->
  </div>
</template>
  
  <script>
import TableMixin from "@/views/mixins/Table";
import XhListHead from "@/components/XhListHead/index.vue";
import { getActItemStaticByCoundAPI } from "@/api/inspection";
import moment from "moment";
export default {
  name: "Total",

  data() {
    return {
      list: null,
      listLoading: true,

      // 表格高度
      height: document.documentElement.clientHeight - 151,
      // 默认搜索事件
      defaultDateRang: [
        moment().subtract(7, "days").calendar(),
        moment().add(1, "days"),
      ],

      //导出
      fielname: "点检统计",
      listHander: {
        dptname: "部门名称",
        username: "用户名",
        plandjcount: "应点检数",
        actdjcount: "实点检数",
        finishrate: "点检完成率",
        normaldjcount: "正常点检数",
        abnormaldjcount: "异常点检数",
      },
    };
  },
  mixins: [TableMixin],

  components: {
    XhListHead,
  },
  mounted() {
    this.$nextTick(() => {
      this.search = {
        ...this.$refs.TableHead.formatSearch(),
      };
      this.getList(this.search);
    });
  },

  methods: {
    /** tableData */
    getList(search) {
      this.listLoading = true;
      if (search && search.hasOwnProperty("executets")) {
        search.createstart = search.executets;
        search.createend = search.executete;
        delete search.executets;
        delete search.executete;
      }

      if (search && search.hasOwnProperty("keyword")) {
        search.keywords = search.keyword;
        delete search.keyword;
      }
      getActItemStaticByCoundAPI({
        // pagenum: this.currentPage - 1,
        // pagesize: this.pageSize,
        ...search,
      })
        .then((res) => {
          this.tableData = res.Data;
          this.total = res.Total;
          this.listLoading = false;
        })
        .catch(() => {
          this.listLoading = false;
        });
    },
    /**排序 */
    sortChange(column) {
      console.log(column, 8899);
      this.tableData = this.tableData.sort(
        this.SortFun(column.prop, column.order === "descending")
      );
    },

    SortFun(attr, rev) {
      //第一个参数传入info里的prop表示排的是哪一列，第二个参数是升还是降排序
      if (rev == undefined) {
        rev = 1;
      } else {
        rev = rev ? 1 : -1;
      }
      return function (a, b) {
        a = a[attr];
        b = b[attr];
        if (a < b) {
          return rev * -1;
        }
        if (a > b) {
          return rev * 1;
        }
        return 0;
      };
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.app-container {
  width: 100%;
}
</style>